<template>
    <view>
        <view class="avatar">
            <!-- #ifdef MP-WEIXIN -->
            <u-avatar :src="LoginAdmin.avatar_cdn" size="90" v-if="JSON.stringify(LoginAdmin) !== '{}'"></u-avatar>
            <!-- 如果没有获取到就会显示微信头像 -->
            <open-data type="userAvatarUrl" v-else></open-data>
            <!-- #endif -->
            <!-- #ifdef H5 || APP-PULS -->
            <u-avatar :src="LoginAdmin.avatar_cdn" size="90" v-if="JSON.stringify(LoginAdmin) != '{}'"></u-avatar>
            <u-avatar src="/static/avatar.jpg" size="90" v-else></u-avatar>
            <!-- #endif -->
        </view>

        <view style="width: 90%">
            <u--form labelWidth="90" labelAlign="center" :model="LoginAdmin" :rules="rules" ref="uForm">
                <u-form-item label="用户名" prop="username" class="item">
                    <u--input v-model="LoginAdmin.username" disabled></u--input>
                </u-form-item>
                <u-form-item label="昵称" prop="nickname" class="item">
                    <u--input v-model="LoginAdmin.nickname"></u--input>
                </u-form-item>
                <u-form-item label="邮箱" prop="email" class="item">
                    <u--input v-model="LoginAdmin.email"></u--input>
                </u-form-item>
                <!-- 手机号 -->
                <u-form-item label="手机号" prop="mobile" class="item">
                    <u--input v-model="LoginAdmin.mobile"></u--input>
                </u-form-item>
                <!-- 密码 -->
                <u-form-item label="密码" prop="password" class="item">
                    <u--input type="password" v-model="LoginAdmin.password" placeholder="如若需修改密码请输入，否则留空"></u--input>
                </u-form-item>
                <!-- 头像 -->
                <u-form-item label="头像" prop="avatar" class="item">
                    <u-upload :fileList="avatar" @afterRead="afterRead" @delete="deletePic" name="avatar"
                        :maxCount="1"></u-upload>
                </u-form-item>
            </u--form>
        </view>
        <u-button type="warning" icon="pushpin-fill" @click="onSubmit" :customStyle="btnStyle">登录</u-button>
        <u-toast ref="uToast"></u-toast>
    </view>
</template>
<script>
export default {
    data() {
        return {
            LoginAdmin: {
                nickname: "",
                email: "",
                mobile: "",
                password:"",
            },
            avatar: [],
            rules: {
                nickname: {
                    type: "string",
                    required: true,
                    message: "请输入昵称",
                    trigger: ["change", "blur"],
                },
                email: {
                    type: "email",
                    required: true,
                    message: "请输入邮箱",
                    trigger: ["change", "blur"],
                },
                mobile: {
                    type: "number",
                    required: true,
                    message: "请输入手机号",
                    trigger: ["change", "blur"],
                },
                password: {
                    type: "string",
                    trigger: ["change", "blur"],
                }
            },
            btnStyle: {
                marginTop: "10px",
            },
        };
    },
    methods: {
        // 删除图片
        deletePic() {
            this.avatar = [];
        },
        // 新增图片
        afterRead(file) {
            if (file.file) {
                this.avatar = [];
                this.avatar.push(file.file);
            }
        },
        onSubmit() {
            this.$refs.uForm
                .validate()
                .then(async () => {
                    if (!uni.$u.test.mobile(this.LoginAdmin.mobile)) {
                        console.log("手机号格式不正确");
                        return;
                    }
                    let data = {
                        id: this.LoginAdmin.id,
                        nickname: this.LoginAdmin.nickname,
                        email: this.LoginAdmin.email,
                        mobile: this.LoginAdmin.mobile,
                    };

                    let formData = {};

                    if (this.LoginAdmin.password) {
                        data.password = this.LoginAdmin.password;
                    }

                    if (this.avatar[0]?.thumb) {
                        formData = {
                            filePath: this.avatar[0].thumb,
                            name: 'avatar',
                            formData: data
                        }
                    } else {
                        formData = data;
                    }
                    
                    console.log(formData);

                    let result = await this.$u.api.admin.profile(formData);
                    if (result && result.code === 1) {
                        this.$refs.uToast.show({
                            type: "success",
                            message: result.msg,
                            complete: () => {
                                uni.setStorageSync("admin", result.data);
                                this.$u.route({
                                    type:'back',
                                });
                            }
                        });
                        return;
                    } else {
                        this.$refs.uToast.show({
                            type: "error",
                            message: result.msg,
                        })

                        return;
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        },


        onShow() {
            // let admin = uni.getStorageSync("admin");
            // if (admin) {
            //     this.admin = admin;
            //     this.LoginAdmin = admin;
            // } else {
            //     this.$refs.uToast.show({
            //         type: "error",
            //         message: "请先登录",
            //     });
            //     uni.navigateTo({
            //         url: "/pages/login/index",
            //     });
            // }
        },
        onReady() {
            //onReady 为uni-app支持的生命周期之一
            this.$refs.uForm.setRules(this.rules)

            this.LoginAdmin = uni.getStorageSync("admin") ?? {};
            if (this.LoginAdmin.avatar) {
                this.avatar = [{
                    url: this.LoginAdmin.avatar_cdn,
                }]
            }
        },
    }
};
</script>
<style>
.avatar {
    display: flex;
    height: 150px;
    justify-content: center;
    align-items: center;
}
</style>
